<%--
  Created by IntelliJ IDEA.
  User: lub_lenovo
  Date: 2017/8/7
  Time: 17:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%@include file="/WEB-INF/jsp/public/header.jsp" %>
<%@include file="/WEB-INF/jsp/public/nav.jsp" %>
<style>
    .table img{
        width:100px;
    }
    .thumbs>ul{
        list-style: none;
    }
    .thumbs>ul{
        list-style: none;
        padding-left:0px;
        margin-top:10px;
        margin-bottom: 0px;
        overflow: hidden;
    }
    .thumbs>ul>li{
        position: relative;
        float:left;
        width:100px;
        height: 70px;
        margin-right:20px;
        border:1px solid cornflowerblue;
        overflow: hidden;
    }
    .thumbs>ul>li>img{
        max-width:100%;
    }

</style>
<div class="container-fluid">
    <div class="row">
        <div class="left col-sm-2">
            <%@include file="/WEB-INF/jsp/public/menu.jsp" %>
        </div>
        <div class="right col-sm-10">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li>文章列表</li>
            </ol>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    文章列表
                </div>
                <div class="panel-body">
                    <div class="alert alert-success alert-dismissible" role="alert" style="display: none;">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        ${msg}
                    </div>
                    <table class="table table-bordered table-striped">
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>分类</th>
                            <th>缩略图</th>
                            <th>布局方式</th>
                            <th>发布者</th>
                            <th>浏览次数</th>
                            <th>跟帖数</th>
                        </tr>

                        <c:forEach items="${pageInfo.list}" var="a">
                            <tr>
                                <td align="center">${a.id}</td>
                                <td align="center">${a.title}</td>
                                <td align="center">${a.navname}</td>
                                <td align="center" class="thumbs" data-imgs="${a.thumbs}">

                                </td>
                                <td align="center">${a.layout}</td>
                                <td align="center">${a.publisher}</td>
                                <td align="center">${a.views}</td>
                                <td align="center">${a.follows}</td>
                                <%--<td align="center"><fmt:formatDate value="${a.inserttime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>--%>
                            </tr>
                        </c:forEach>
                    </table>
                    <ul class="pagination">
                        <c:if test="${!pageInfo.isFirstPage}">
                            <li><a href="/article/articleList.do?page=${pageInfo.firstPage}">首页</a></li>
                        </c:if>
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <li><a href="/article/articleList.do?page=${pageInfo.prePage}">&laquo;</a></li>
                        </c:if>
                        <c:forEach items="${pageInfo.navigatepageNums}" var="p">
                            <li><a href="/article/articleList.do?page=${p}">${p}</a></li>
                        </c:forEach>
                        <c:if test="${pageInfo.hasNextPage}">
                            <li><a href="/article/articleList.do?page=${pageInfo.nextPage}">&raquo;</a></li>
                        </c:if>
                        <c:if test="${!pageInfo.isLastPage}">
                            <li><a href="/article/articleList.do?page=${pageInfo.lastPage}">末页</a></li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('.thumbs').each(function(index,item){
            var imgs=$(item).data("imgs");
            imgArr=imgs.split(',');
            var html='<ul>';
            imgArr.forEach(function(item,index){
                html+='<li><img src="'+item+'"/></li>';
            });
            html+="</ul>";
            $(item).html(html);
        })
    })
</script>
<%@include file="/WEB-INF/jsp/public/footer.jsp"%>
